<template>
  <div>
    <div class="user-title">
      <span>编辑项目</span>
      <div class="btn-group">
        <Button type="primary" class="btn" @click="upDateItem">更新项目</Button>
        <Button type="primary" class="btn">查看结果</Button>
      </div>
    </div>
    <div class="base">
      <div class="base-title">
        基本设置*
      </div>
      <Form
        ref="formValidate"
        :model="itemDetails.item"
        :label-width="100"
        class="base-from"
      >
        <Row>
          <Col span="11">
            <FormItem label="项目名称" prop="itemName">
              <Input
                v-model="itemDetails.item.itemName"
                placeholder="请输入项目名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="11">
            <FormItem label="截止日期" prop="endTime">
              <DatePicker
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择截止日期"
                v-model="itemDetails.item.endTime"
              ></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <FormItem label="项目说明" prop="itemContent">
          <Input
            v-model="itemDetails.item.itemContent"
            maxlength="500"
            :autosize="{ minRows: 4, maxRows: 6 }"
            show-word-limit
            type="textarea"
            placeholder="请输入项目说明"
            style="width:100%"
          />
          <p>
            项目说明将展示在测评作答页面，供受测者阅读，可用于介绍测评目的及测评要求。最多允许输入
            <span class="emphasis">500</span> 字。
          </p>
        </FormItem>
        <FormItem prop="time">
          <Checkbox v-model="itemDetails.item.isShow"
            >允许受测者查看报告</Checkbox
          >
        </FormItem>
      </Form>
    </div>
    <br />
    <div class="base">
      <div class="base-title">产品*</div>
      <div class="product-content">
        <Row>
          <Col span="16">
            <div class="product-list-title">
              <p>测评配置库</p>
              <Row>
                <Col span="2">搜索:</Col>
                <Col span="16">
                  <Input v-model="product.evaluationName" placeholder="请输入"
                /></Col>
                <Col span="6"> <Button type="primary">搜索</Button></Col>
              </Row>
            </div>
            <div class="product-list">
              <CheckboxGroup v-model="checkItem" @on-change="checkProduct">
                <ul>
                  <li v-for="item in itemDetails.evalList" :key="item.id">
                    <Checkbox :label="'' + item.id">
                      {{ item.evaluationName }}
                    </Checkbox>
                  </li>
                </ul>
              </CheckboxGroup>
            </div>
          </Col>
          <Col span="8"
            ><div class="product-list-title">
              <p>所选产品：</p>
              <ul>
                <li v-for="item in productItem" :key="item.id">
                  {{ item.evaluationName }}
                </li>
              </ul>
            </div>
          </Col>
        </Row>
      </div>
    </div>
    <br />
    <div class="base">
      <div class="base-title">候选人*</div>
      <div class="candidate-content">
        <RadioGroup v-model="candidate.button" type="button">
          <Radio label="方式一"></Radio>
          <Radio label="方式二"></Radio>
        </RadioGroup>
        <div v-show="candidate.button == '方式一'">
          <h2>未确定候选人，创建多用测试账号</h2>
          <Checkbox v-model="candidate.single">启用多用测试账号</Checkbox>
          <br />
          <InputNumber v-model="candidate.value" :disabled="!candidate.single">
          </InputNumber
          >设置多用账号允许使用次数
          <br />
          <Button type="primary" :disabled="!candidate.single">确定</Button>
        </div>
        <div v-show="candidate.button == '方式二'">
          <h2>已确定候选人并希望通过电子邮件邀请该候选人参加测评</h2>
          <Form
            ref="formInline"
            :model="formInline"
            :rules="formInlineRules"
            inline
            :label-width="80"
          >
            <FormItem label="姓名" prop="candidateName">
              <Input
                type="text"
                v-model="formInline.candidateName"
                placeholder="姓名"
              >
              </Input>
            </FormItem>
            <FormItem label="性别" prop="gender">
              <Select v-model="formInline.gender" style="width:200px">
                <Option value="1">男</Option>
                <Option value="0">女</Option>
              </Select>
            </FormItem>
            <FormItem label="邮件地址" prop="mailbox">
              <Input
                type="text"
                v-model="formInline.mailbox"
                placeholder="邮件"
              >
              </Input>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('formInline')"
                >添加</Button
              >
            </FormItem>
          </Form>
          <p>
            要上传多位候选人，请使用
            <Upload
              class="operation"
              action="//jsonplaceholder.typicode.com/posts/"
            >
              <Button type="primary">批量上传</Button>
            </Upload>

            <Button class="operation" type="primary" @click="download"
              >下载模板</Button
            >
            <Button class="operation" type="text">需要帮助</Button>
          </p>
          <div class="candidate-list">
            <div class="candidate-table">
              <div class="candidate-table-header">
                <div>姓名</div>
                <div>性别</div>
                <div>邮箱</div>
                <div>通行证</div>
                <div>操作</div>
              </div>
              <div
                class="candidate-table-item"
                v-for="item in itemDetails.candidateList"
                :key="item.id"
              >
                <div>{{ item.candidateName }}</div>
                <div>{{ item.gender ? '男' : '女' }}</div>
                <div>{{ item.mailbox }}</div>
                <div>{{ item.guid }}</div>
                <div>
                  <Button
                    class="operation"
                    type="primary"
                    size="small"
                    @click="editCandidate(item)"
                    >编辑</Button
                  >
                  <Button
                    class="operation"
                    type="primary"
                    size="small"
                    @click="delCandidate(item.id)"
                    >移除</Button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <div class="base">
      <div class="base-title">提醒*</div>
      <div class="remind-content">
        <h1>
          创建提醒邮件模板
        </h1>
        <Row :gutter="20">
          <Col span="12">
            <RadioGroup style="width:100%" v-model="disabledGroup">
              <div class="radio-item">
                <div class="radio-item-header">
                  <Radio label="0" value="0">默认模板</Radio>
                </div>
                <div class="radio-item-body" v-html="text"></div>
              </div>
              <div class="radio-item">
                <div class="radio-item-header">
                  <Radio label="1" value="1">自定义模板</Radio>
                </div>
                <div class="radio-item-body">
                  <div
                    ref="editorElem"
                    id="websiteEditorElem"
                    style="height: 360px;overflow:hidden"
                  ></div>
                </div>
              </div>
            </RadioGroup>
          </Col>
          <Col span="12">
            <RadioGroup style="width:100%" v-model="remindType">
              <div class="radio-item2">
                <Radio label="提醒日期"></Radio>
                <DatePicker
                  type="date"
                  v-model="itemDetails.message.startTime"
                  placeholder="Select date"
                  :disabled="remindType != '提醒日期'"
                  style="width: 200px"
                ></DatePicker>
              </div>
              <div class="radio-item2">
                <Radio label="项目截止天数"></Radio>
                <Input
                  v-model="itemDetails.message.endTime"
                  style="width:300px"
                  :disabled="remindType != '项目截止天数'"
                  placeholder="请输入提醒信息"
                />
              </div>
            </RadioGroup>
          </Col>
        </Row>
      </div>
    </div>
    <Modal v-model="modal1" title="编辑" @on-ok="handleSubmit('formInline2')">
      <Form
        ref="formInline2"
        :model="formInline2"
        :rules="formInlineRules"
        inline
        :label-width="80"
      >
        <FormItem label="姓名" prop="candidateName">
          <Input
            type="text"
            v-model="formInline2.candidateName"
            placeholder="姓名"
          >
          </Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
          <Select v-model="formInline2.gender" style="width:200px">
            <Option value="1">男</Option>
            <Option value="0">女</Option>
          </Select>
        </FormItem>
        <FormItem label="邮件地址" prop="mailbox">
          <Input type="text" v-model="formInline2.mailbox" placeholder="邮件">
          </Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import instance from '@/http/http'
import E from 'wangeditor'
import moment from 'moment'
export default {
  data() {
    return {
      itemDetails: {
        item: {},
        candidateList: {},
        evalList: [],
        message: {}
      },
      candidate: {
        single: false,
        button: '方式二'
      },
      formInline: {
        candidateName: '',
        gender: 0,
        mailbox: '',
        itemId: sessionStorage.getItem('itemId')
      },
      formInline2: {},
      modal1: false,
      formInlineRules: {
        candidateName: [
          {
            required: true,
            message: '姓名不能为空',
            trigger: 'blur'
          }
        ],
        gender: {
          required: true,
          message: '请选择性别',
          trigger: 'blur'
        },
        mailbox: {
          required: true,
          message: '邮箱不能为空',
          trigger: 'blur'
        }
      },
      productItem: [],
      product: {
        evaluationName: ''
      },
      checkItem: [],
      productList: [],
      edit: null,
      disabledGroup: '0',
      remindType: '提醒日期',
      text:
        ' <p>在测试之前，请仔细阅读以下文字：</p> <p>1、进入后设置自己的密码，密码为8位，包含字母+数字；</p><p> 2、测评要假己的行为在工作场景中的表现，而不是生活场景中的自己；</p><p>3、为保证测评结果的有效性，请选择完整时间、安静环境完成作答。</p>'
    }
  },
  mounted() {
    this.edit = new E(this.$refs.editorElem)
    this.edit.onchange = function(html) {
      this.itemDetails.message.msgContent = html
    }
    this.edit.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'justify', // 对齐方式
      'quote', // 引用
      'undo', // 撤销
      'redo' // 重复
    ]
    this.edit.create()
    this.getDetails()
  },
  methods: {
    getDetails() {
      var data = this.$route.params
      instance.post('/item/queryById', data).then(res => {
        let data = res.data
        this.itemDetails = JSON.parse(JSON.stringify(data))
        console.log(this.itemDetails)
        this.disabledGroup = data.message.isDefault + ''
        if (data.message.isDefault) {
          this.edit.txt.html(data.message.msgContent)
        }
        this.itemDetails.item.isShow = res.data.item.isShow ? false : true
        var dataArr = []
        for (var i = 0; i < data.evalList.length; i++) {
          dataArr.push(data.evalList[i].id + '')
        }
        this.checkItem = dataArr

        this.checkProduct(this.checkItem)
      })

      this.$forceUpdate()
    },
    download() {
      window.location.href = 'http://47.105.186.204:70//down/candidate'
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let data = name == 'formInline' ? this.formInline : this.formInline2
          instance.post('/item/candidate/update', data).then(res => {
            this.$refs[name].resetFields()
            this.$Message.success(
              name == 'formInline' ? '添加成功' : '修改成功'
            )
            this.getDetails()
          })
        }
      })
    },
    editCandidate(item) {
      this.formInline2 = JSON.parse(JSON.stringify(item))
      this.formInline2.gender = '' + item.gender
      this.modal1 = true
    },
    delCandidate(id) {
      instance.post('/item/candidate/delete', { id: id }).then(res => {
        if (res.code == 200) {
          this.$Message.success('删除成功')
          this.getDetails()
        } else {
          this.$Message.error('删除失败')
        }
      })
      console.log(id)
    },
    upDateItem() {
      let data = JSON.parse(JSON.stringify(this.itemDetails))
      data.item.isShow = data.item.isShow ? 0 : 1;
      data.message.startTime =data.message.startTime?moment(
        data.message.startTime,
      ).format('YYYY-MM-DD HH:mm:ss'):''
      data.item.endTime = data.item.endTime?moment(data.item.endTime).format('YYYY-MM-DD HH:mm:ss'):''
      data.message.msgContent =
        this.disabledGroup == '0' ? this.text : this.edit.txt.html()

      instance.post('/item/detail/update', data).then(res => {
        if (res.code == 200) {
          this.$Message.success('更新成功')
          this.$router.go(-1)
        }
      })
    },
    //选择产品
    checkProduct(id) {
      this.productItem = []
      for (var k = 0; k < this.itemDetails.evalList.length; k++) {
        for (var i = 0; i < id.length; i++) {
          if (this.itemDetails.evalList[k].id == id[i]) {
            this.productItem.push(this.itemDetails.evalList[k])
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.user-title {
  span {
    font-size: 20px;
    color: #5cadff;
  }
  overflow: hidden;
  .btn-group {
    float: right;
    height: 50px;
    .btn {
      margin: 0 10px;
    }
  }
}
.base {
  width: 100%;
  padding-bottom: 20px;
  border: 1px solid #5cadff;
  .base-title {
    height: 45px;
    padding: 10px;
    box-sizing: border-box;
    background: #eee;
    line-height: 25px;
    color: #5cadff;
    border-bottom: 1px solid #5cadff;
  }
  .base-from {
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
    .emphasis {
      color: red;
    }
  }
  .candidate-content {
    padding: 20px;
    h2 {
      font-weight: bold;
    }
    .operation {
      display: inline-block;
      margin: 0 10px;
    }
    .candidate-list {
      margin: 20px;
      box-sizing: border-box;
      padding: 10px;
      background: #eee;
      .candidate-table {
        border: 1px solid #999;
        border-right: none;
        border-top: none;
        line-height: 35px;
        .candidate-table-header {
          overflow: hidden;
          background: #5cadff;
          div {
            width: 20%;
            float: left;
            text-align: center;
            color: #fff;
            border-right: 1px solid #999;
            border-top: 1px solid #999;
          }
        }
        .candidate-table-item {
          overflow: hidden;
          background: #fff;
          div {
            width: 20%;
            float: left;
            text-align: center;
            border-right: 1px solid #999;
            border-top: 1px solid #999;
          }
        }
      }
    }
  }
  .product-content {
    .product-list-title {
      padding-left: 20px;
      font-size: 18px;
      font-weight: 500;
    }
    .product-list {
      margin: 20px;
      box-sizing: border-box;
      padding: 20px;
      background: #eee;
      ul {
        width: 100%;
        background: #fff;
        border: 1px solid #999;
        li {
          padding: 5px 10px;
          line-height: 20px;
          box-sizing: border-box;
        }
      }
    }
  }
  .remind-content {
    padding-left: 20px;
    box-sizing: border-box;
    h1 {
      font-size: 20px;
      font-weight: bold;
    }
    .radio-item {
      width: 100%;
      border: 1px solid #999;
      margin-bottom: 20px;
      .radio-item-header {
        line-height: 40px;
        background: #5cadff;
        color: #fff;
        padding-left: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #999;
      }
      .radio-item-body {
        padding: 20px;
        background: #fff;
      }
    }
    .radio-item2 {
      padding: 10px 20px;
      box-sizing: border-box;
      background: #eee;
    }
  }
}
</style>
